<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>课程管理系统</span>
      </div>
      <div>
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item prop="username">
            <el-input placeholder="账号" v-model.trim="form.username">
              <template slot="prepend"><i class="el-icon-user"></i></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="密码" v-model.trim="form.password" type="password">
              <template slot="prepend"><i class="el-icon-edit"></i></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="userType">
            <el-radio-group v-model="form.userType">
              <el-radio label="2">教师</el-radio>
              <el-radio label="3">教务管理员</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item style="margin-bottom: 0;">
            <!-- <router-link to="/home"> -->
            <el-button type="primary" @click="submit">登录</el-button>
            <!-- </router-link> -->
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
// 登录接口
import { login } from '@/api/user';
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        userType: '3'
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        userType: [
          { required: true, message: '请选择用户类型', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    submit() {
      // 验证
      this.$refs['form'].validate(valid => {
        if (valid) {
          login(this.form).then(res => {
            if (res.code === 0) {
              // 轻提示
              this.$message({
                message: '登录成功',
                type: 'success',
                duration: 1500
              });
              let group = []
              for (let bit = 0; bit < 8; bit++) {
                // 0100 0000
                // 0010 0000
                if (((1 << bit) & res.data.permission) === 1 << bit) {
                  group.push((1 << bit).toString());
                }
              }
              res.data.group = group
              this.$store.commit('user/updateInfo', res.data)
              // 跳转
              this.$router.push('/home')
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.login {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../assets/login.jpg");
  background-size: 100% 100%;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 300px;
  border: none;
  background-color: rgba($color: black, $alpha: 0.5);
  font-size: large;
  color: white;
}

.el-input {
  border: none;
}

.el-radio {
  color: white;
}

.el-button {
  width: 100%;
}
</style>